import React, { useState } from 'react'

export default function FormControl() {
    /**
     *  受控组件
     *  1. 状态数据渲染到表单
     * 
     */
    const submitHandler = (e)=>{
        console.log('username: ',username)
        console.log('password: ',password)
        console.log('sex: ',sex)
        console.log('city: ',city)
        console.log('hobby: ',hobby)
        e.preventDefault()
    }
    // 定义状态数据
    let [username, setUsername] = useState('yuonly')
    let [password, setPassword] = useState('123123')
    let [sex, setSex] = useState('1')
    let [city, setCity] = useState('1')
    let [hobby, setHobby] = useState(['1','3'])

    // const changeUsername = (e)=>{
    //     // 获取表单数据，修改状态数据
    //     setUsername(e.target.value)
    // }
    // const changePassword = (e)=>{
    //     setPassword(e.target.value)
    // }

    /**
     * 利用高阶函数封装change
     * 高阶函数？
     *   函数的参数是函数，或者函数的返回值是函数
     */
    const changeHandler = (setFn,data)=>{
        return (e)=>{
            let value = e.target.value
            if(e.target.type==='checkbox'){
                let index = data.findIndex(item=>e.target.value === item)
                value = [...data]
                if(index === -1)value.push(e.target.value)
                else value.splice(index,1)
            }
            setFn(value)
        }
    }


    return (
        <div>
            <form onSubmit={submitHandler}>
                <p>用户名: <input type="text" name="username" value={username}  onChange={changeHandler(setUsername)}/></p>
                <p>密  码: <input type="text" name="password" value={password}  onChange={changeHandler(setPassword)}/></p>
                <p>
                    性别：
                    <input type="radio" name="sex" value="1" checked={sex==='1'} onChange={changeHandler(setSex)}/> 男
                    <input type="radio" name="sex" value="0" checked={sex==='0'} onChange={changeHandler(setSex)}/> 女
                </p>
                <p>
                    city: 
                    <select name="city" value={city} onChange={changeHandler(setCity)}>
                        <option value="1">北京</option>
                        <option value="2">深圳</option>
                        <option value="3">上海</option>
                    </select>
                </p>
                <p>
                    爱好：
                    <input type="checkbox" name="hobby" value="1" checked={hobby.includes('1')} onChange={changeHandler(setHobby,hobby)}/> 台球
                    <input type="checkbox" name="hobby" value="2" checked={hobby.includes('2')} onChange={changeHandler(setHobby,hobby)}/> 羽毛球
                    <input type="checkbox" name="hobby" value="3" checked={hobby.includes('3')} onChange={changeHandler(setHobby,hobby)}/> 乒乓球
                    <input type="checkbox" name="hobby" value="4" checked={hobby.includes('4')} onChange={changeHandler(setHobby,hobby)}/> 溜溜球
                </p>
                <button>提交</button>
            </form>
        </div>
    )
}
